<template>
	<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
	<headassy title="备件详细" :isSearch="false" :isTab="false"></headassy>
	<view class="spare-content" :style="'height: calc(100vh - ' + (parseInt(system.safeArea.top) + 44) + 'px)'">
		<view class="part">
			<view class="top">
				<view class="u-flex-between top-s">
					<view class="left" style="flex: 1; padding-right: 20rpx;">
						申请编号：{{spareInfo.applyNo}}
					</view>
					<view class="right u-flex">
						<view class="status-green-btn">
							{{spareInfo.reviewTime}}
						</view>
					</view>
				</view>
				<view class="u-flex-between mb-10">
					<view class="left">
						申请人员：{{spareInfo.receiptName}}
					</view>
					<view class="right u-flex text-gray">
						{{spareInfo.applyTime}}
					</view>
				</view>
				<view class="u-flex-between">
					<view class="left">
						申请类型：{{spareInfo.applyType}}
					</view>
					<view class="right u-flex" v-if="spareInfo.reviewTime != '待审核'">
						旧件处理：{{spareInfo.oidMethod}}
					</view>
				</view>
				<view class="u-flex-between">
					申请地址：{{spareInfo.applicant}}
				</view>
				<view class="u-flex-between">
					申请地址：{{spareInfo.receiptAddress}}
				</view>
			</view>
		</view>
		<!-- 备件 -->
		<view class="compon">
			<view class="container card">
				<view class="top u-flex-between">
					<view class="left">
						备件
					</view>
					<view class="right u-flex">
						工单：<p class="text-orange">{{spareInfo.workNo}}</p>
					</view>
				</view>
				<view class="card-main" v-for="item in spareInfoData2" :key="item.partName">
					<view class="item u-flex-between mb-10">
						<view class="left">
							名称：{{item.partName}}
						</view>
						<view class="right text-green">
							{{item.result}}
						</view>
					</view>
					<view class="item u-flex-between mb-10">
						<view class="left u-flex text-orange">
							费用：¥ {{item.cost}}
							<!-- <p class="text-orange"> ¥{{item.cost}}</p> -->
						</view>

					</view>
					<view class="item u-flex-between ">
						<view class="left u-flex text-gray">
							备注：
							<!-- <p class="text-orange">¥10</p> -->
						</view>

					</view>
				</view>
			</view>
		</view>
		<!-- 旧件 -->
		<view class="compon2" v-if="spareInfo.reviewTime != '待审核'">
			<view class="top u-flex-between">
				<view class="left">
					旧件
				</view>
				<view class="right" :class="spareInfo.reviewResult === '已通过' ? 'text-green' : 'text-gray'">
					{{spareInfo.reviewResult}}
				</view>
			</view>
			<view class="card-main">
				<view class="item u-flex-between mb-10">
					<view class="">
						处理方式：{{spareInfo.oidMethod}}
					</view>
				</view>

			</view>
		</view>
		<!-- 出库 -->
		<view class="compon" v-if="spareInfo.reviewTime != '待审核'">
			<view class="container card">
				<view class="top u-flex-between">
					<view class="left">
						出库
					</view>
				</view>
				<view class="card-main" v-for="item in spareLogis" :key="item.partName + item.singleNum">
					<view class="item u-flex-between mb-10">
						<view class="left">
							出库物料：{{item.partName}}
						</view>
						<view class="right text-green">
							{{item.documentStatus}}
						</view>
					</view>
					<view class="item u-flex-between mb-10">
						<view class="left u-flex">
							出库仓库：{{item.wareName}}
						</view>
						<view class="right u-flex  text-gray">
							{{item.deliveryTime ? item.deliveryTime : '暂无发货时间'}}
						</view>
					</view>
					<view class="item u-flex-between ">
						<view class="left u-flex text-gray">
							备注：
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				custAccId: '',			// 商家id
				acId: '',				// 登录账号id
				spareId: '',			// 备件id
				spareInfoData2: [],		// 备件详情数据2
				spareInfo: {			// 处理后的数据
					applyNo: '',		// 申请编号
					applyTime: '',		// 申请时间
					receiptName: '',	// 备件售后信息  名称
					workNo: '',			// 工单编号
					applyType: '',  	// 申请类型
					reviewTime: '',		// 当前状态
					oidMethod: '',		// 旧件处理
					reviewResult: '',	// 旧件处理状态
					applicant: '',		// 申请网点
					receiptAddress: '',	// 申请地址
					// documentStatus: '',	// 出库状态
					// singleNum: '',		// 出库单号
					// wareName: '',		// 出库仓库
					// partName: '',		// 出库物料
					// deliveryTime: '',	// 出库时间
				},
				spareLogis: [],			// 出库信息
				result: '',				// 状态
				
				popShow: false,			// 禁止穿透
				system: uni.getSystemInfoSync(),
			};
		},
		onLoad(e) {
			this.custAccId = uni.getStorageSync('custAccid');
			this.acId = uni.getStorageSync('acId');
			this.spareId = e.spareId;
			this.getPullRefresh();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh()
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear()
				this.getspareInfoData1();
				this.getspareInfoData2();
				uni.stopPullDownRefresh()
			},
			// 备件详情数据1
			async getspareInfoData1() {
				const res = await uni.$api.spareInfo.getSpareInfo_1(this.custAccId,this.acId,this.spareId);
				if(res.code == 0) {
					Object.keys(this.spareInfo).forEach(key => {
						if(res.data.review) {
							if (res.data.review[key] != null) {
								console.log(key,res.data.review[key])
								this.spareInfo[key] = res.data.review[key];
							}
						}
						if(res.data.spareApply) {
							if (res.data.spareApply[key] != null) {
								this.spareInfo[key] = res.data.spareApply[key];
							}
						}
					})
					if(res.data.spareLogis) {
						this.spareLogis = res.data.spareLogis;
					}
				}
				
				console.log('获取备件详情1', res)
				console.log('备件和旧件数据', this.spareInfo)
				console.log('出库数据', this.spareLogis)
			},
			// 备件详情数据2
			async getspareInfoData2() {
				const res = await uni.$api.spareInfo.getSpareInfo_2(this.spareId)
				console.log('获取备件详情2', res);
				this.spareInfoData2 = res.data;
			},
		},
	}
</script>

<style lang="scss">
	/deep/.u-navbar--fixed {
		position: static !important;
	}
	
	.spare-content {
		background-color: #f5f5f5;
		// height: 100vh;
		padding: 20rpx 20rpx 0;
	}

	.part {
		padding: 14px 16px;
		font-size: 14px;
		background: #fff;
		margin-bottom: 10rpx;

		.top {
			margin-bottom: 10rpx;
			
		}

		.top-s {
			padding-bottom: 14px;
		}
	}

	.compon2 {
		padding: 0 16px;
		font-size: 14px;
		background-color: #fff;
		margin-bottom: 10rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			border-bottom: solid 1px #f5f5f5;

			.left {
				position: relative;
				line-height: 100rpx;
			}

			.left::after {
				content: "";
				width: 32px;
				height: 3px;
				background: #fd7400;
				position: absolute;
				bottom: 0;
				left: 0;
			}
			
			.right {
				position: relative;
				line-height: 100rpx;
			}
		}

		.card-main {
			padding: 19px 17px 19px 0;
		}
	}

	.compon {
		padding: 0 16px;
		font-size: 14px;
		background-color: #fff;
		margin-bottom: 10rpx;

		.container.card {
			background-color: #fff;
		}

		.top {
			height: 100rpx;
			border-bottom: solid 1px #f5f5f5;

			.left {
				position: relative;
				line-height: 100rpx;
			}

			.left::after {
				content: "";
				width: 32px;
				height: 3px;
				background: #fd7400;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}

		.card-main {
			padding: 16px 0;

		}

	}
</style>